layui.use(['echarts'], function () {
    let echarts = layui.echarts;

    // 学生成绩分布
    let gradeDistribution = echarts.init(document.getElementById('gradeDistribution'));
    gradeDistribution.setOption({
        legend: {
            top: 'bottom'
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',
                radius: [5, 100],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: [
                    { value: 10, name: '60分以下' },
                    { value: 20, name: '60-70分' },
                    { value: 30, name: '70-80分' },
                    { value: 25, name: '80-90分' },
                    { value: 15, name: '90分以上' }
                ]
            }
        ]
    });





    // 某课程平均成绩
    let courseAverage = echarts.init(document.getElementById('courseAverage'));
    courseAverage.setOption({
        title: {
            text: '某课程平均成绩',
            left: 'center',
            textStyle: {
                fontSize: 16,
                fontWeight: 'bold',
                color: '#4D4D4D'
            }
        },
        grid: {
            top: 60,
            left: 50,
            bottom: 60,
            right: 60
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' }
        },
        xAxis: {
            type: 'category',
            data: ['课程1', '课程2', '课程3'],
            axisLabel: {
                color: '#4D4D4D',
                fontSize: 14,
                margin: 15,
                fontWeight: 'bold'
            },
            axisTick: { show: false },
            axisLine: { lineStyle: { color: '#808080' } }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: '#4D4D4D',
                fontSize: 14
            },
            splitLine: { lineStyle: { type: 'dashed' } }
        },
        series: [
            {
                type: 'bar',
                data: [75, 80, 85],
                barMaxWidth: 50,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: '#3DC3F0' },
                        { offset: 1, color: '#CCF2FF' }
                    ]
                },
                label: {
                    show: true,
                    position: 'top',
                    fontSize: 14,
                    fontWeight: 'bold',
                    color: '#3DC3F0'
                }
            }
        ]
    });

    // 某学院平均成绩和绩点
    let departmentAverage = echarts.init(document.getElementById('departmentAverage'));
    departmentAverage.setOption({
        title: {
            text: '某学院平均成绩和绩点',
            left: 'center',
            textStyle: {
                fontSize: 16,
                fontWeight: 'bold',
                color: '#4D4D4D'
            }
        },
        grid: {
            top: 60,
            left: 50,
            bottom: 60,
            right: 60
        },
        tooltip: { trigger: 'axis' },
        legend: {
            top: '5%',
            right: '10%',
            textStyle: { fontSize: 12, color: '#808080' }
        },
        xAxis: {
            type: 'category',
            data: ['学院1', '学院2', '学院3'],
            axisLabel: {
                color: '#4D4D4D',
                fontSize: 14
            }
        },
        yAxis: [
            {
                type: 'value',
                name: '平均成绩',
                axisLabel: { color: '#4D4D4D', fontSize: 12 }
            },
            {
                type: 'value',
                name: '平均绩点',
                axisLabel: { color: '#4D4D4D', fontSize: 12 }
            }
        ],
        series: [
            {
                name: '平均成绩',
                type: 'bar',
                data: [80, 85, 78],
                barMaxWidth: 40,
                color: '#3DC3F0'
            },
            {
                name: '平均绩点',
                type: 'line',
                data: [3.2, 3.5, 3.0],
                color: '#3D8BF0'
            }
        ]
    });

    // 某任课老师平均成绩
    let teacherAverage = echarts.init(document.getElementById('teacherAverage'));
    teacherAverage.setOption({
        title: {
            text: '某任课老师平均成绩',
            left: 'center',
            textStyle: {
                fontSize: 16,
                fontWeight: 'bold',
                color: '#4D4D4D'
            }
        },
        grid: {
            top: 60,
            left: 50,
            bottom: 60,
            right: 60
        },
        xAxis: {
            type: 'category',
            data: ['老师1', '老师2', '老师3'],
            axisLabel: {
                color: '#4D4D4D',
                fontSize: 14
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: '#4D4D4D',
                fontSize: 12
            }
        },
        series: [
            {
                type: 'line',
                data: [78, 82, 90],
                color: '#3DC3F0',
                lineStyle: { width: 3 },
                label: {
                    show: true,
                    position: 'top',
                    fontSize: 12,
                    color: '#3DC3F0'
                }
            }
        ]
    });

    window.onresize = function () {
        gradeDistribution.resize();
        courseAverage.resize();
        departmentAverage.resize();
        teacherAverage.resize();
    }
});
